<template>
	<view class="">
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: current === index }]"
				@click="handleClick(index)">
				<text>{{ tab }}</text>
				
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component, Prop } from 'vue-property-decorator'

	@Component
	export default class TabBar extends Vue {
		@Prop({ required: true }) tabs! : string[]
		@Prop({ required: true }) current! : number

		handleClick(index : number) {
			this.$emit('change', index)
		}
	}
</script>

<style lang="scss" scoped>
	.tab-bar {
		display: flex;
		padding: 24rpx 32rpx;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		align-items: center;
		justify-items: center;

		.tab-item {
			flex: 1;
			// margin-right: 24px;
			font-weight: 500;
			font-size: 24rpx;

			// text-align: center;
			&:first-child {
				text-align: left;
			}

			&:nth-child(2) {
				text-align: center;
			}

			&:last-child {
				text-align: right;
			}

			&.active {
				color: #000;
				font-weight: 500;

				text {
					position: relative;

					&::after {
						content: '';
						position: absolute;
						bottom: -10rpx;
						left: 0;
						right: 0;
						height: 2px;
						background-color: #43D534;
					}
				}
			}
		}
	}
</style>